import React, { useState } from 'react'
import { useNavigate, Outlet } from 'react-router-dom'
import {
  Menu,
  Button,
  Avatar,
  Dropdown,
  Space,
  Card
} from '@hi-ui/hiui'
import { useUserStore } from '../store/userStore'
import './MainLayout.css'

const MainLayout = () => {
  const navigate = useNavigate()
  const { userInfo, logout } = useUserStore()
  const [collapsed, setCollapsed] = useState(false)

  // 菜单项配置
  const menuItems = [
    {
      key: 'dashboard',
      title: '仪表盘',
      children: [
        { key: 'overview', title: '概览' },
        { key: 'analytics', title: '数据分析' }
      ]
    },
    {
      key: 'user',
      title: '用户管理',
      children: [
        { key: 'user-list', title: '用户列表' },
        { key: 'user-profile', title: '用户档案' }
      ]
    },
    {
      key: 'system',
      title: '系统管理',
      children: [
        { key: 'role', title: '角色管理' },
        { key: 'permission', title: '权限管理' },
        { key: 'menu', title: '菜单管理' }
      ]
    },
    {
      key: 'content',
      title: '内容管理',
      children: [
        { key: 'article', title: '文章管理' },
        { key: 'category', title: '分类管理' }
      ]
    },
    {
      key: 'test',
      title: '测试页面',
      children: [
        { key: 'test', title: '组件测试' }
      ]
    }
  ]

  // 处理菜单点击
  const handleMenuClick = (key) => {
    navigate(`/${key}`)
  }

  // 处理登出
  const handleLogout = async () => {
    await logout()
    navigate('/login')
  }

  // 用户下拉菜单
  const userMenu = (
    <div className="user-dropdown">
      <div className="user-info">
        <Avatar size="sm" src={userInfo.avatar}>
          {userInfo.nickname?.charAt(0) || userInfo.username?.charAt(0) || 'U'}
        </Avatar>
        <div className="user-details">
          <div className="username">{userInfo.nickname || userInfo.username}</div>
          <div className="user-role">管理员</div>
        </div>
      </div>
      <hr className="divider" />
      <div className="menu-items">
        <div className="menu-item" onClick={() => navigate('/profile')}>
          <span className="icon">👤</span>
          <span>个人中心</span>
        </div>
        <div className="menu-item" onClick={() => navigate('/settings')}>
          <span className="icon">⚙️</span>
          <span>系统设置</span>
        </div>
        <hr className="divider" />
        <div className="menu-item logout" onClick={handleLogout}>
          <span className="icon">🚪</span>
          <span>退出登录</span>
        </div>
      </div>
    </div>
  )

  return (
    <div className="main-layout">
      <div className={`main-sider ${collapsed ? 'collapsed' : ''}`}>
        <div className="logo">
          {!collapsed && <h2>管理系统</h2>}
          {collapsed && <h2>MS</h2>}
        </div>
        <Menu
          data={menuItems}
          onClick={handleMenuClick}
          defaultOpenKeys={['dashboard']}
          defaultSelectedKeys={['overview']}
        />
      </div>
      
      <div className="main-content-wrapper">
        <div className="main-header">
          <div className="header-left">
            <Button
              type="text"
              onClick={() => setCollapsed(!collapsed)}
              className="collapse-btn"
            >
              {collapsed ? '☰' : '✕'}
            </Button>
            <div className="breadcrumb">
              仪表盘 / 概览
            </div>
          </div>
          
          <div className="header-right">
            <Space>
              <Button type="text">🔔</Button>
              <Button type="text">❓</Button>
              <Dropdown overlay={userMenu} trigger="click">
                <div className="user-avatar">
                  <Avatar size="sm" src={userInfo.avatar}>
                    {userInfo.nickname?.charAt(0) || userInfo.username?.charAt(0) || 'U'}
                  </Avatar>
                  <span className="username">{userInfo.nickname || userInfo.username}</span>
                </div>
              </Dropdown>
            </Space>
          </div>
        </div>
        
        <div className="main-content">
          <div className="content-wrapper">
            <Outlet />
          </div>
        </div>
      </div>
    </div>
  )
}

export default MainLayout
